<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>canvas</title>
		<style>
			body {
				background: #00CCCC;
			}
		</style>
	</head>

	<body>

		<canvas></canvas>

		<script type="text/javascript">
			(function(bodyStyle) {
				bodyStyle.mozUserSelect = 'none';
				bodyStyle.webkitUserSelect = 'none';
				var img = new Image();
				var canvas = document.querySelector('canvas');
				canvas.style.backgroundColor = 'transparent';
				canvas.style.position = 'absolute';
				img.addEventListener('load', function(e) {
					var ctx;
					var w = 320, h = 460;
					var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;
					var mousedown = false;
					function layer(ctx) {
						ctx.fillStyle = 'gray';
						ctx.fillRect(0, 0, w, h);
						ctx.drawImage(img, 0, 0, w, h);
					}

					function eventDown(e) {
						e.preventDefault();
						mousedown = true;
					}

					function eventUp(e) {
						e.preventDefault();
						mousedown = false;
					}

					function eventMove(e) {
						e.preventDefault();
						if (mousedown) {
							if (e.changedTouches) {
								e = e.changedTouches[e.changedTouches.length - 1];
							}
							var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
							var imgData = ctx.getImageData(0, 0, 320, 460);
							with (ctx) {
								beginPath()
								arc(x, y, 20, 0, Math.PI * 2);
								fill();
								console.log(imgData.data[3])
							}
						}
					}


					canvas.width = w;
					canvas.height = h;
					ctx = canvas.getContext('2d');
					ctx.fillStyle = 'transparent';
					ctx.fillRect(0, 0, w, h);
					layer(ctx);
					ctx.globalCompositeOperation = 'destination-out';
					canvas.addEventListener('touchstart', eventDown);
					canvas.addEventListener('touchend', eventUp);
					canvas.addEventListener('touchmove', eventMove);
					canvas.addEventListener('mousedown', eventDown);
					canvas.addEventListener('mouseup', eventUp);
					canvas.addEventListener('mousemove', eventMove);
				});

				img.src = 'img/welcome.jpg';

			})(document.body.style);
		</script>

	</body>
</html>
